import {Form, Row, Tooltip, Button} from "@douyinfe/semi-ui";
import {IconInfoCircle} from "@douyinfe/semi-icons";
import {useState} from "react";
import { useTranslation } from "react-i18next";
import {DESENSITIZE_TYPE} from "../util/encrypt";

const EncryptForm = ({textTypeFields=[],
                       getSourceFiledId = (id:string)=>{},
                       getDecryptType = (type:string)=>{},
                       getDecryptScope = (scope:string)=>{},
                       getPassword = (password:string)=>{},
                       getDesensitizeType = (desensitizeType:string)=>{},
                       getStartRow=(row: Number)=>{} })=> {
  const [encryptType, setEncryptType] = useState('desensitization');
  const [encryptScope, setEncryptScope] = useState('all');
  const [formApi, setFormApi] = useState();

  const { t } = useTranslation();


  const onFormChange = (e: any) => {
    const {encryptType, sourceFieldId, encryptScope, startRow, password, desensitizeType} = e.values;
    setEncryptType(encryptType);
    setEncryptScope(encryptScope);
    getSourceFiledId(sourceFieldId);
    getStartRow(startRow);
    getPassword(password);
    getDecryptType(encryptType);
    getDecryptScope(encryptScope);
    getDesensitizeType(desensitizeType);
  };

  const randomString = (length) => {
    let len = length || 6;
    let source = "abcdefghjkmnpqrstwxyz2345678"
    let sourceLength = source.length;
    let result = "";
    for (let i = 0; i < len; i++) {
      result += source.charAt(Math.floor(Math.random() * sourceLength));
    }
    return result;
  }

  const randomPassword = ()=> {
    formApi.setValue('password', randomString(6));
  }

  return (
    <Form
      style={{ padding: 10, width: '100%' }}
      getFormApi={setFormApi}
      onChange={onFormChange}
    >
      <Row>
        <Form.RadioGroup initValue={encryptType} field={'encryptType'} label={t("encrypt.type")}>
          <Form.Radio value={'desensitization'}>
            {t("encrypt.desensitization")}&nbsp;<Tooltip content={t("encrypt.desensitization.tip")}><IconInfoCircle /></Tooltip>
          </Form.Radio>
          <Form.Radio value={'symmetric'}>
            {t("encrypt.symmetric")}&nbsp;
            <Tooltip content={t("encrypt.symmetric.tip")}>
              <IconInfoCircle />
            </Tooltip>
          </Form.Radio>
          <Form.Radio value={'asymmetric'}>
            {t("encrypt.asymmetric")}&nbsp;
            <Tooltip content={t("encrypt.asymmetric.tip")}>
              <IconInfoCircle />
            </Tooltip>
          </Form.Radio>
        </Form.RadioGroup>

        <Form.Select
          field="sourceFieldId"
          style={{ width: '90%' }}
          label={t("encrypt.choose.sourceFieldId")}
          placeholder={t("encrypt.choose.placeHolder")}
        >
          {textTypeFields.map((field) => {
            return (
              <Form.Select.Option value={field.id} key={field.id}>{field.name}</Form.Select.Option>
            );
          })}
        </Form.Select>

        {
          encryptType === 'desensitization' &&
          <Form.Select
            field="desensitizeType"
            style={{ width: '90%' }}
            label={t("encrypt.desensitize.type")}
            placeholder={t("encrypt.choose.placeHolder")}
          >
            {Object.keys(DESENSITIZE_TYPE).map((key) => {
              return (
                <Form.Select.Option value={DESENSITIZE_TYPE[key]} key={key}>{DESENSITIZE_TYPE[key]}</Form.Select.Option>
              );
            })}
          </Form.Select>
        }
        {
          encryptType === 'symmetric' &&
          <Form.Input maxLength={8} suffix={<Button onClick={randomPassword} type="tertiary">{t("encrypt.password.random")}</Button>} style={{width:"90%"}} field={"password"} label={t("encrypt.password")}/>
        }

        <Form.RadioGroup initValue={encryptScope} field={'encryptScope'} label={t("encrypt.scope")}>
          <Form.Radio value={'all'}>
            {t("encrypt.scope.all")}
          </Form.Radio>
          <Form.Radio value={'part'}>
            {t("encrypt.scope.part")}
          </Form.Radio>
        </Form.RadioGroup>
        {
          encryptScope === 'part' &&
          <Form.InputNumber style={{width: '90%'}} field={'startRow'} maxLength={5} label={t('encrypt.part.start')}/>
        }
      </Row>
    </Form>
  )
}

export default EncryptForm;
